<template>
	<view class="container">
		<!-- 任务卡片区域 -->
		<view class="task-grid">
			<!-- 待办问题卡片 -->
			<view class="task-card" :style="{background: cardColors[0]}" @click="handleCardClick('todo')">
				<view class="card-content">
					<text class="card-title">待办问题</text>
					<text class="card-count">{{count.problem || 0}} 项待处理</text>
				</view>
				<view class="card-icon">
					<uni-icons type="alert" size="40" color="#fff"></uni-icons>
				</view>
			</view>

			<!-- 消缺任务卡片 -->
			<view class="task-card" :style="{background: cardColors[1]}" @click="handleCardClick('defect')">
				<view class="card-content">
					<text class="card-title">消缺任务</text>
					<text class="card-count">{{count.toDoTask || 0}} 项待处理</text>
				</view>
				<view class="card-icon">
					<uni-icons type="wrench" size="40" color="#fff"></uni-icons>
				</view>
			</view>

			<!-- 现场任务卡片（通栏） -->
			<view class="task-card full-width" :style="{background: cardColors[2]}" @click="handleCardClick('field')">
				<view class="card-content">
					<text class="card-title">现场任务</text>
					<text class="card-count">{{count.toDoProduct || 0}} 项待处理</text>
				</view>
				<view class="card-icon">
					<uni-icons type="location" size="48" color="#fff"></uni-icons>
				</view>
			</view>
			<!-- 我的项目卡片 -->
			<view class="task-card full-width" :style="{background: cardColors[3]}" @click="handleCardClick('myProject')">
				<view class="card-content">
					<text class="card-title">我的项目</text>
					<!-- <text class="card-count">{{count.myProject || 0}}个项目</text> -->
				</view>
				<view class="card-icon">
					<uni-icons type="folder-add" size="40" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" />

	</view>
</template>

<script>
	import {
		getProblemCount,
		getToDoTaskCount,
		getToDoProductServiceCount,
	} from "@/common/api.js"
	export default {
		data() {
			return {
				// 卡片渐变背景色
				cardColors: [
					'linear-gradient(135deg, #409EFF 0%, #66b1ff 100%)',
					'linear-gradient(135deg, #13C2C2 0%, #36D1DC 100%)',
					'linear-gradient(135deg, #722ED1 0%, #9370DB 100%)',
					'linear-gradient(135deg, #F7BA1E 0%, #FFD561 100%)' // 新增我的项目背景色（黄色渐变）
				],
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
					iconPath: '/static/images/tabbar/problem.png',
					selectedIconPath: '/static/images/tabbar/problem_act.png',
					text: '问题反馈',
					active: false,
					// url:'/pages/problem/addQuestion'
					url: '/pages/project/index'
				}, ],
				count: {
					problem: 0,
					toDoTask: 0,
					toDoProduct: 0,
				}
			};
		},
		onShow() {
			this.getCount()
		},
		methods: {
			handleUpload() {

			},

			getCount() {
				getProblemCount().then(res => {
					this.count.problem = res.data.toDoProblemCount
				})
				getToDoTaskCount().then(res => {
					this.count.toDoTask = res.data.toDoProblemCount
				})
				getToDoProductServiceCount().then(res => {
					this.count.toDoProduct = res.data.toDoProblemCount
				})

			},

			// 卡片点击事件
			handleCardClick(type) {
				// 实际项目中替换为真实跳转逻辑
				// uni.showToast({
				// 	title: `进入${this.getTypeName(type)}`,
				// 	icon: 'none'
				// });
				if(type ==='myProject'){
					uni.navigateTo({
						url: this.getTypeName(type)
					})
				}else{
					uni.switchTab({
						url: this.getTypeName(type)
					})
				}
				
			},
			// 获取任务类型名称
			getTypeName(type) {
				const names = {
					todo: '/pages/problem/index',
					defect: '/pages/defectElimination/index',
					field: '/pages/scene/index',
					myProject:'/pages/projectInfo/project'
				};
				return names[type] || 0;
			},
			trigger(e) {
				this.$commonFn.Navto(e.item.url)

				// this.content[e.index].active = !e.item.active
				// uni.showModal({
				// 	title: '提示',
				// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// })
			},
		}
	};
</script>

<style>
	page {
		background-color: #f5f7fa;
	}
</style>
<style scoped>
	.container {
		padding: 24rpx;
		background-color: #f5f7fa;
		box-sizing: border-box;
	}

	/* 页面标题 */
	.page-header {
		padding: 30rpx 0;
		text-align: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #303133;
	}

	/* 任务卡片网格 */
	.task-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
		margin-bottom: 30rpx;
	}

	/* 任务卡片样式 */
	.task-card {
		border-radius: 16rpx;
		padding: 30rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		height: 200rpx;
		box-sizing: border-box;
	}

	.task-card:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
	}

	.task-card.full-width {
		grid-column: 1 / -1;
		/* 占满整行 */
		height: 240rpx;
	}

	/* 卡片内容 */
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.card-title {
		font-size: 34rpx;
		font-weight: 500;
	}

	.card-count {
		font-size: 26rpx;
		opacity: 0.9;
	}

	/* 卡片图标 */
	.card-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 统计信息栏 */
	.stats-bar {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: 600;
		color: #303133;
	}

	.stat-label {
		font-size: 24rpx;
		color: #606266;
	}
</style>